<script>
import Footer from './Footer.vue'
import Logo from './Logo.vue'
import {User, Lock} from '@element-plus/icons-vue'

export default {

    components: {
        Footer,
        Logo,
    },

    methods:{
        routeLogin(){
            this.$router.push("/index")
        }
    },

    data(){
        return {
            username : '',
            password : '',
            User,
            Lock
        }
    }
}

</script>

<template>
    <header>
        <div class="header-container">
            <div class="logo-wrapper">
                <Logo />
            </div>
        </div>
    </header>
    <main>
        <div class="body-container">
            <span class="login-tip">登录Colorful官网</span>
            <form>
                <el-input
                    class="w-50 m-2 login-input"
                    v-model="username"
                    placeholder="手机号/邮箱"
                    :prefix-icon="User"
                    clearable
                />
                <el-input
                    type="password"
                    class="w-50 m-2 login-input"
                    v-model="password"
                    placeholder="密码"
                    :prefix-icon="Lock"
                    clearable
                />
                <span class="password-tip">忘记密码</span><br/>
                <button class="login-btn" @click="routeLogin">登录</button>
                <span class="policy-wrapper"><input type="checkbox"/>已阅读并同意《Colorful用户服务协议》和《Colorful隐私政策》</span>
                <div class="register-wrapper">
                    <span>免费注册</span>
                </div>
            </form>
        </div>
    </main>
    <Footer/>
</template>

<style scoped>

.register-wrapper{
    text-align: right;
    font-size: 10px;
}

.policy-wrapper{
    font-size: 10px;
}

.policy-wrapper > input{
    height: 10px;
}

.login-input,password-tip{
    margin: 10px 0;
}

.login-btn{
    background-color: black;
    width: 100%;
    color: white;
    font-size: 15px;
    line-height: 30px;
    margin-top: 10px;
    cursor: pointer;
}

.login-tip{
    margin-bottom: 20px;
    display: inline-block;
    font-size: 20px;
}


header{
    display: flex;
    height: 90px;
    justify-content: center;
    align-items: center;
}

.login-form{
    background-color: white;
    height: 120px;
}

.body-container{
    width: 300px;
    height: 380px;
    margin-left: 60%;
    background-color: white;
    padding: 30px;
}

main{
    display: flex;
    margin: 0 auto;
    height: 600px;
    align-items: center;
    background-image: url('../assets/login-bg.jpg');
}

.logo-wrapper{
    width: 60%;
}

.header-container{
    width: 60%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.welcome-tip{
    margin-left: 20px;
}

</style>
